<template>
  <div class="wrapper">
    <!-- 时间 -->
    <div class="time-wrapper" v-if="showTime">
      <span class="time">{{showTime}}</span>
    </div>
    <!-- 撤回消息 -->
     <div class="time-wrapper" v-if="chatItem.isremove">
      <span class="time">你撤回了一条消息 </span>
      <span class="remake" @click="remake">重新编辑</span>
    </div>
    <!-- 聊天气泡 -->
    <!-- 左边 -->
    <!-- 头像 -->
    <!-- 邀请消息 -->
    <div class="time-wrapper" v-if="chatItem.M_MessagesType==='invite'"><span class="invite">{{chatItem.M_PostMessages}}</span></div>
    <!-- 红包领取消息 -->
    <!-- 被领取 -->
    <div class="time-wrapper" v-if="chatItem.M_PostMessages.acceptId !== userId && chatItem.M_MessagesType==='sendPacket'">
      <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-hongbao"></use>
    </svg>
    <span class="inf">{{chatItem.M_PostMessages}}</span>
    <span class="packetText">红包</span>
    </div>
    <!-- 领取 -->
    <div class="time-wrapper" v-if="chatItem.M_PostMessages.acceptId == userId && chatItem.M_MessagesType==='sendPacket'">
      <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-hongbao"></use>
    </svg>
    <span class="inf">{{chatItem.M_PostMessages}}</span>
    <span class="packetText">红包</span>
    </div>
    <div class="chatBubble chatBubble-left" v-if="chatItem.M_FromUserID !== userId&&!chatItem.isremove&&chatItem.M_MessagesType!=='invite'&&chatItem.M_MessagesType!=='sendPacket'">
      <van-image
        width="1.5rem"
        height="1.5rem"
        radius=".2rem"
        fit="cover"
        :src="chatItem.avatar"
        @click="toUserDetail"
        :class="isShowName?'changeImg':''"
      />
     <div>
       <div class="nickname-left" v-if="isShowName">{{chatItem.name}}</div>
        <!-- 文本类型 -->
      <div  :class="{'chatContent chat-left':chatItem.M_MessagesType==='text'}" @touchstart="start($event,chatIndex)" @touchend="end">
        <span v-if="chatItem.M_MessagesType=='text'">
          {{chatItem.M_PostMessages}}
        </span>
         <!-- 表情包类型 -->
        <van-image
        width="3.5rem"
        height="3.5rem"
        fit="contain"
        :src="chatItem.M_PostMessages"
        style="marginLeft:.5rem;"
        @click="showImg"
        v-else-if="chatItem.M_MessagesType=='face'||chatItem.M_MessagesType=='image'"
        />
        <!-- 红包 -->
         <div :class="chatItem.M_PostMessages.isOpen?'packet-left-isOpen':'packet-left'" v-else-if="chatItem.M_MessagesType=='packet'" @click="showPacket(chatItem)">
        <div class="header flex van-hairline--bottom">
            <svg class="icon" aria-hidden="true">
          <use :xlink:href="chatItem.M_PostMessages.isOpen?'#icon-hongbao5':'#icon-hongbao4'"></use>
        </svg>
        <div class="text" :class="chatItem.M_PostMessages.isOpen?'':'f-center'">
          <div>{{chatItem.M_PostMessages.message}}</div>
          <div class="tip" v-if="chatItem.M_PostMessages.isOpen">已领取</div>
        </div>
        </div>
        <div class="bottom">
          微信红包
        </div>
        </div>
      </div>
     </div>
    </div>
    <!-- 右边 -->
    <div class="chatBubble chatBubble-right" v-if="chatItem.M_FromUserID == userId&&!chatItem.isremove&&chatItem.M_MessagesType!=='invite'&&chatItem.M_MessagesType!=='sendPacket'">
      <div class="right-wapper">
        <div class="nickname-right" v-if="isShowName">{{chatItem.name}}</div>
         <div  :class="{'chatContent chat-right':chatItem.M_MessagesType==='text'}" @touchstart="start($event,chatIndex)" @touchend="end">
        <!-- 文本 -->
        <span v-if="chatItem.M_MessagesType=='text'">
          {{chatItem.M_PostMessages}}
        </span>
        <!-- 表情包/图片 -->
         <van-image
        width="3rem"
        height="3rem"
        fit="contain"
        :src="chatItem.M_PostMessages"
        style="marginRight:.5rem;"
        @click="showImg"
        v-else-if="chatItem.M_MessagesType=='face'||chatItem.M_MessagesType=='image'"
        />
        <!-- 红包 -->
        <div :class="chatItem.M_PostMessages.isOpen?'packet-right-isOpen':'packet-right'" v-else-if="chatItem.M_MessagesType=='packet'" @click="showPacket(chatItem)">
        <div class="header flex van-hairline--bottom">
            <svg class="icon" aria-hidden="true">
          <use :xlink:href="chatItem.M_PostMessages.isOpen?'#icon-hongbao5':'#icon-hongbao4'"></use>
        </svg>
        <div class="text" :class="chatItem.M_PostMessages.isOpen?'':'f-center'">
          <div>{{chatItem.M_PostMessages.message}}</div>
          <div class="tip" v-if="chatItem.M_PostMessages.isOpen">已被领取</div>
        </div>
        </div>
        <div class="bottom">
          微信红包
        </div>
        </div>
      </div>
      </div>
      <van-image
        width="1.5rem"
        height="1.5rem"
        radius=".2rem"
        fit="cover"
        :src="chatItem.avatar"
        :class="isShowName?'changeImg':''"
        @click="toUserDetail"
      />
    </div>
    <!-- 聊天弹出框 -->
        <we-popup ref="itemPopup" :bodyWidth="100" :bodyHeight="120" :limitY='false'>
            <div class="chatBox-wrapper f-col">
                <div v-for="(item,index) in chatBox" :key="index" class="chatBox-item f-1" @click="boxEvent(item.event)">
                  {{item.title}}
                </div>
            </div>
        </we-popup>
  </div>
</template>
<script>
import time from '../../../api/libs/time';
import wePopup from '../common/wePopup';
import { ImagePreview } from 'vant';
export default {
    props:{
        chatItem:Object,
        chatIndex:Number,
        // 上一条消息时间戳
        pretime:[Number,String],
        listY:[Number,String],
        isShowName:{
          type:Boolean,
          default:false
        }
    },
    components:{
      wePopup
    },
    computed:{
      showTime(){
        return time.getChatTime(this.chatItem.M_Time,this.pretime)
      }
    },
    data(){
      return{
        userId:sessionStorage.getItem('user'),
      friendId:this.$route.params.id,
         chatBox:[
            {
              title:'复制',
              event:''
            },
             {
              title:'转发',
              event:''
            },
             {
              title:'收藏',
              event:''
            },
             {
              title:'删除',
              event:''
            },
             {
              title:'多选',
              event:''
            },
             {
              title:'撤回',
              event:'remove'
            }
          ]
      }
    },
    methods:{
        // 长按事件
        start(e,index){
      clearTimeout(this.loop); //再次清空定时器，防止重复注册定时器
        let x=0
        let y=0
      this.loop = setTimeout(() => {
        if(e.changedTouches.length>0){
            x=e.changedTouches[0].clientX
            y=e.changedTouches[0].clientY
            }
            let pageY = y
            if(Math.abs(this.listY)>0&&index>0){
              y=y-this.$refs.itemPopup.bodyHeight*2
              pageY=y+Math.abs(this.listY)
            }
            this.$refs.itemPopup.show(x,pageY)
      },750);
    },
    end(){
      clearTimeout(this.loop); //清空定时器，防止重复注册定时器
    },
 boxEvent(e){
     switch(e){
       case 'remove':
         this.chatItem.isremove=true;break;
       default:break;
     }
     this.$refs.itemPopup.hide()
    },
    remake(){
      this.$emit('remake',this.chatIndex)
    },
    toUserDetail(){
      this.$router.push('/userBase/'+this.chatItem.M_FromUserID)
    },
      showImg(){
      ImagePreview({
        images: [
            this.chatItem.M_PostMessages
        ],
        showIndex:false
        });
    },
    showPacket(e){
      this.$emit('showPacket',e)
    }
    }
};
</script>
<style scoped>
.time-wrapper{
  width: 100%;
  text-align: center;
  font-size: .4rem;
  padding: .5rem;
   
}
.time{
  width: auto;
  padding: .2rem .3rem;
  background-color: rgba(255,255,255,.5);
}
.invite{
  font-size: .4rem;
  background-color: rgba(255,255,255,.5);
}
.remake{
  width: auto;
  padding: .2rem .3rem;
  color: mediumturquoise;
  background-color: rgba(255,255,255,.5);
  
}
.chatBubble {
  display: flex;
  align-items: start;
  padding: 0.3rem;
  position: relative;
}
.chatBubble-left {
  justify-content: flex-start;
}
.chatBubble-right {
  justify-content: flex-end;
}
.chatContent {
  position: relative;
  padding: 0.4rem;
  border-radius: 0.3rem;
  max-width: 9.5rem;
  font-size: 0.6rem;
  display: inline-block;
  margin-left: 1rem;
}
.chat-left {
  background-color: #fff;
  margin-left: 0.3rem;
}
.chat-left:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: .18rem solid transparent;
    border-right: .3rem solid #ffffff;
    border-bottom: .18rem solid transparent;
    left: -.25rem;
    top: .65rem;
}
.chat-right {
  background-color: #6bee68;
  margin-right: 0.3rem;
}
.chat-right:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
     width: 0;
    height: 0;
    border-top: .18rem solid transparent;
    border-left: .3rem solid #6bee68;
    border-bottom: .18rem solid transparent;
    right: -.25rem;
    top: .65rem;
}
.chatBox-wrapper{
  width: 100px;
  height: 240px;
  font-size: .6rem;
  background-color: #fff;
  border: 1px solid rgba(204,204,204,.5);
  box-sizing: border-box;
  box-shadow: 1px 1px 1px rgba(204,204,204,.5);
}
.chatBox-item{
  padding-left: .5rem;
  line-height: 40px;
}

.chatBox-item:active{
  background: rgba(0,0,0,.1);
}
.nickname-left{
  font-size: .4rem;
  padding-left: .4rem;
}
.right-wapper{
  position: relative;
}
.nickname-right{
  font-size: .4rem;
  text-align: right;
  padding-right: .4rem;
}
.changeImg{
  position: relative;
  top: .4rem;
}
.packet-left{
   background-color: #F8A03F;
  width: 50vw;
  height: 2.6rem;
  padding: .2rem .5rem;
  border-radius: .2rem;
  margin-left: .3rem;
}
.packet-left-isOpen{
 background-color: #FCE1C3;
  width: 50vw;
  height: 2.6rem;
  padding: .2rem .5rem;
  border-radius: .2rem;
  margin-left: .3rem;
}
.packet-left:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: .3rem solid transparent;
    border-right: .35rem solid #F8A03F;
    border-bottom: .3rem solid transparent;
    left: 1.8rem;
    top: .65rem;
}
.packet-left-isOpen:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: .3rem solid transparent;
    border-right: .35rem solid #FCE1C3;
    border-bottom: .3rem solid transparent;
    left: 1.8rem;
    top: .65rem;
}
.packet-right{
  background-color: #F8A03F;
  width: 50vw;
  height: 2.6rem;
  padding: .2rem .5rem;
  border-radius: .2rem;
  margin-right: 0.3rem;
}
.packet-right:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
     width: 0;
    height: 0;
    border-top: .3rem solid transparent;
    border-left: .35rem solid #F8A03F;
    border-bottom: .3rem solid transparent;
    right: 0;
    top: .65rem;
}
.packet-right-isOpen{
  background-color: #FCE1C3;
  width: 50vw;
  height: 2.6rem;
  padding: .2rem .5rem;
  border-radius: .2rem;
  margin-right: 0.3rem;
}
.packet-right-isOpen:after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
     width: 0;
    height: 0;
    border-top: .3rem solid transparent;
    border-left: .35rem solid #FCE1C3;
    border-bottom: .3rem solid transparent;
    right: 0;
    top: .65rem;
}
.header{
  padding: .2rem 0 .4rem;
}
.header .icon{
  font-size: 1.3rem;
}
.text{
  font-size: .5rem;
  color: #ffffff;
  margin-left: .5rem;
}
.tip{
  color: #ffffff;
  font-size: .4rem;
}
.bottom{
  position: relative;
  left: -1rem;
  font-size: .4rem;
  color: rgba(255, 255, 255, .8);
  transform: scale(.7);
}
.time-wrapper .icon{
  font-size: .7rem;
}
.time-wrapper .inf{
  font-size: .5rem;
}
.packetText{
  color: #F8A03F;
  font-size: .5rem;
}
</style>